<template>
	<view v-if="data">
		<!-- 通告栏 -->
		<uni-notice-bar
			style="margin: 0;"
			single
			text="预祝WEB2016班级顺利找到好的工作!!!"
			scrollable
			showIcon
			showClose
			:speed="50"
		></uni-notice-bar>
		<!-- 轮播图 -->
		<swiper
			:indicator-dots="true"
			:autoplay="true"
			:interval="3000"
			:duration="1000"
		>
			<swiper-item v-for="(item, index) in carouselItems" :key="index">
				<image
					:src="baseUrl + item.img"
					style="width: 100%;height: 100%;"
				></image>
			</swiper-item>
		</swiper>
		<!-- 楼层 商品列表 -->
		<!-- 小图片 和文字提示 -->
		<!-- 遍历生成每个楼层 -->
		<view v-for="(item1, index1) in items" :key="index1">
			<view class="header">
				<uni-icons type="shop"></uni-icons>
				<text>{{ item1.title }}</text>
			</view>
			<!-- 宫格的商品列表 -->
			<uni-grid
				:column="2"
				:showBorder="false"
				:highlight="false"
				:square="false"
			>
				<uni-grid-item v-for="(item, index) in item1.data" :key="index">
					<view class="item">
						<image :src="baseUrl + item.pic"></image>
						<view>
							<view>{{ item.title }}</view>
							<view>{{ item.details }}</view>
							<view>¥{{ item.price }}</view>
							<!-- #ifdef H5 -->
							<button
								type="primary"
								size="mini"
								@click="goDetail(item.pid)"
							>
								查看详情
							</button>
							<!-- #endif -->
							
							<!-- #ifndef MP-WEIXIN -->
							<!-- <button
								style="background-color: #007aff; color: white;"
								size="mini"
								@click="goDetail(item.pid)"
							>
								查看详情
							</button> -->
							<!-- #endif -->
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 底部图标 -->
		<uni-grid :column="4" :highlight="false" :showBorder="false">
			<!-- 4  1,2,3,4 -->
			<uni-grid-item v-for="(item, index) in 4" :key="index">
				<view
					style="display: flex;align-items: center;justify-content: center;height: 100%;"
				>
					<image
						style="width: 50%; height: 60%;"
						:src="`/static/icons/icon${item}.png`"
					/>
				</view>
				<view
					style="display: flex;align-items: center;justify-content: center;height: 100%;color:gray;font-size: 0.8em;"
				>
					{{ bottomText[index] }}
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- 回到顶部按钮 -->
		<view class="btn-gotop" v-show="showGoTop" @click="doGoTop">
			<uni-icons color="white" size="20" type="arrowthinup"></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: null,
			baseUrl: 'http://www.codeboy.com:9999/',
			showGoTop: false
		};
	},
	mounted() {
		this.getData();
	},
	onPageScroll(e) {
		// console.log(e);
		this.showGoTop = e.scrollTop > 1500;
	},
	methods: {
		goDetail(lid) {
			uni.navigateTo({
				url: '../good-details/good-details?lid=' + lid
			});
		},
		doGoTop() {
			console.log('触发回到顶部');
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 250
			});
		},
		getData() {
			const url = 'http://www.codeboy.com:9999/data/product/index.php';
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.data = res.data;
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	// 计算属性
	computed: {
		// 把轮播数据和各层数据进行分割
		// 轮播数据
		carouselItems() {
			// console.log('轮播图数据');
			// console.log(this.data.carouselItems);
			return this.data.carouselItems;
		},
		// 1F首页推荐
		recommendedItems() {
			return this.data.recommendedItems;
		},
		// 2F 最新上架
		newArrivalItems() {
			return this.data.newArrivalItems;
		},
		// 3F 热销单品
		topSaleItems() {
			return this.data.topSaleItems;
		},
		// 通过观察发现1F,2F,3F除了数据和标题不同，其它基本类似
		// 通过遍历最外层实现多个楼层的渲染
		// 自制一个数组 存储1F，2F，3F的数据
		items() {
			return [
				{ title: '1F/首页推荐', data: this.recommendedItems },
				{ title: '2F/最新上架', data: this.newArrivalItems },
				{ title: '3F/热销单品', data: this.topSaleItems }
			];
		},
		bottomText() {
			return ['品质保障', '私人订制', '学员特供', '专属特权'];
		}
	}
};
</script>

<style lang="scss">
.item {
	margin: 6rpx;
	border: 1px solid #c6c6c6;
	border-radius: 6rpx;
	> image {
		width: 100%;
		height: 300rpx;
	}
	> view {
		padding: 10rpx;
		view {
			// 一行隐藏  ...
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			&:first-child {
				font-weight: bold;
			}
			&:nth-child(2) {
				color: gray;
				font-size: 0.8em;
			}
			&:nth-child(3) {
				color: red;
				font: 1.1em;
			}
		}
	}
}
.header {
	padding: 15rpx;
	background-color: #eee;
	> text {
		margin-left: 15rpx;
		font-size: 0.9em;
	}
}
</style>
